const canvas = document.getElementById('test1');
const context = canvas.getContext('2d');
context.font = "40px Arial";
context.fillStyle = 'black';


let textPositionX = 1;
let textPositionY;
let textPositionc = 0;
let textPositiond = 0;
let textNeedMove = false;


window.addEventListener('mousedown', function () {
    console.log('click');
    textNeedMove = !textNeedMove;
})


document.onkeydown = function (event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];

    /*switch (e && e.keyCode){
       case 8:
         do something;
         break;
       case x:
         do other things;
         break;
       }*/

    if (e && e.keyCode == 87) { textPositiond-- }
    if (e && e.keyCode == 83) { textPositiond++ }
    if (e && e.keyCode == 65) { textPositionc-- }
    if (e && e.keyCode == 68) { textPositionc++ }
};


enterFrame();


function enterFrame() {
    if (textNeedMove) {
        textPositionX++;
    }
    textPositionY = 50 * Math.sin(textPositionX / 10);
    console.log('enter-frame');    //不执行
    context.clearRect(0, 0, canvas.width, canvas.height);
    testOne();
    requestAnimationFrame(enterFrame);
}

function testOne() {

    context.fillStyle = "rgb(200,0,0)";
    context.fillRect(110 + textPositionX, 110 + textPositionY, 50, 50);
    context.fillStyle = "rgba(0, 0, 200, 0.5)";
    context.fillRect(130 + textPositionX, 130 + textPositionY, 50, 50);
    context.fillRect(200 + 10 * textPositionc, 200 + 10 * textPositiond, 50, 50)

}

function littleYellowMan(){
    //设置线宽
    context.lineWidth = 2;
    context.lineJoin = "round";


    /*暂时不会搞的眼球颜色
    var gradient = ctx.createRadialGradient(160,150,20,160,150,0);
    gradient.addColorStop(0,"white");
    gradient.addColorStop(1,"orange");
    ctx.fillStyle = gradient;
    ctx.fillRect(140,130,40,40);
    
    var gradient = ctx.createRadialGradient(260,150,20,260,150,0);
    gradient.addColorStop(0,"white");
    gradient.addColorStop(1,"orange");
    ctx.fillStyle = gradient;
    ctx.fillRect(240,130,40,40);
    */


    //眼镜
    context.beginPath();
    context.arc(150, 150, 50, 0, 2 * Math.PI);
    context.stroke();

    context.beginPath();
    context.arc(270, 150, 50, 0, 2 * Math.PI);
    context.stroke();

    context.beginPath();
    context.arc(150, 150, 70, 0.55, 1.83 * Math.PI);
    context.stroke();

    context.beginPath();
    context.arc(270, 150, 70, 2.6, 1.17 * Math.PI, true);
    context.stroke();


    //眼睛
    context.fillStyle = 'black';
    context.beginPath();
    context.arc(160, 150, 20, 0, 2 * Math.PI);
    context.stroke();
    context.fill();

    context.beginPath();
    context.arc(260, 150, 20, 0, 2 * Math.PI);
    context.stroke();
    context.fill();

    context.fillStyle = 'white';
    context.beginPath();
    context.arc(155, 145, 3, 0, 2 * Math.PI);
    context.stroke();
    context.fill();

    context.fillStyle = 'white';
    context.beginPath();
    context.arc(255, 145, 3, 0, 2 * Math.PI);
    context.stroke();
    context.fill();


    //身体
    context.beginPath();
    context.moveTo(150, 80);
    context.bezierCurveTo(190, 65, 230, 65, 270, 80);
    context.stroke();

    context.beginPath();
    context.moveTo(87, 120);
    context.bezierCurveTo(65, 170, 60, 220, 60, 260);
    context.stroke();

    context.beginPath();
    context.moveTo(333, 120);
    context.bezierCurveTo(355, 170, 360, 220, 360, 260);
    context.stroke();

    context.beginPath();
    context.moveTo(70, 170);
    context.lineTo(85, 172);
    context.stroke();

    context.beginPath();
    context.moveTo(350, 170);
    context.lineTo(335, 172);
    context.stroke();

    context.beginPath();
    context.moveTo(165, 250);
    context.bezierCurveTo(220, 250, 260, 240, 280, 230);
    context.bezierCurveTo(300, 300, 170, 310, 165, 250);
    context.stroke();


    //衣服
    context.beginPath();
    context.moveTo(55, 360);
    context.lineTo(120, 360);
    context.lineTo(120, 300);
    context.lineTo(300, 300);
    context.lineTo(300, 360);
    context.lineTo(365, 360);
    context.bezierCurveTo(365, 420, 265, 420, 270, 450);
    context.lineTo(213, 450);
    context.lineTo(213, 430);
    context.lineTo(207, 430);
    context.lineTo(207, 450);
    context.lineTo(150, 450);
    context.bezierCurveTo(155, 420, 55, 420, 55, 360);
    context.stroke();
    context.fillStyle = 'gray';
    context.fill();

    context.beginPath();
    context.moveTo(54, 260);
    context.bezierCurveTo(80, 260, 120, 280, 145, 310);
    context.lineTo(130, 330);
    context.bezierCurveTo(120, 320, 80, 285, 52, 285);
    context.lineTo(54, 260);
    context.stroke();
    context.fillStyle = 'gray';
    context.fill();

    context.beginPath();
    context.moveTo(366, 260);
    context.bezierCurveTo(340, 260, 300, 280, 275, 310);
    context.lineTo(290, 330);
    context.bezierCurveTo(300, 320, 340, 285, 368, 285);
    context.lineTo(366, 260);
    context.stroke();
    context.fillStyle = 'gray';
    context.fill();


    //小口袋，我先懒的弄


    //鞋子
    context.beginPath();
    context.moveTo(265, 450);
    context.bezierCurveTo(265, 460, 280, 450, 280, 470);
    context.lineTo(220, 470);
    context.lineTo(220, 450);
    context.stroke();
    context.fillStyle = 'black';
    context.fill();

    context.beginPath();
    context.moveTo(155, 450);
    context.bezierCurveTo(155, 460, 140, 450, 140, 470);
    context.lineTo(200, 470);
    context.lineTo(200, 450);
    context.stroke();
    context.fill();
}

